<template>
  <div>
  <div class="main">
    <div class="main-head">
      <ul>
        <li class="main-left">
          <img class="b_g" v-bind:src="list.img1"/>
          <div class="onTop">
            <h4>{{list.title}}</h4>
            <h5>{{list.text}}</h5>
            <div class="chan"></div>
            <div class="many">
              <a class="fresh-v" href="#">{{list.text1}}</a>
              <a class="fresh-v" href="#">{{list.text2}}</a>
              <a class="fresh-v" href="#">{{list.text3}}</a>
              <a class="fresh-v" href="#">{{list.text4}}</a>
              <a class="fresh-v" href="#">{{list.text5}}</a>
              <a class="fresh-v" href="#">{{list.text6}}</a>
            </div>
            <a class="more" href="#">{{list.text7}}<span class="jiantou"></span></a>
          </div>

        </li>
        <li class="main-center">
          <a href="#">
            <img v-bind:src="list.img2" class="water" alt="">
          </a>
        </li>
        <li class="main-right">
          <a href="#">
            <img v-bind:src="list.img3" class="panxie" alt="">
          </a>
        </li>
      </ul>
    </div>
    <div class="main-center">
      <ul>
        <li class="goodItem" v-for="item in list.datas" :key="item.index">
          <a href="#" class="goodItem_href">
            <img v-bind:src="item.pic" alt="">
            <p>{{item.title}}}</p>
          </a>
          <p class="price">{{item.price}}</p>
          <div class="but">
            <button class="shopping" v-if="step"><a href="#">购买</a></button>
            <div v-if="!step" class="notFind">暂时无货</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- <div class="main-foot">
      <a href="#" class="ic-ons" v-for="keys in list.icon" :key="keys.index">
        <img v-bind:src="keys" alt="">
      </a> -->
      <!-- 引入下部模块 -->
       <!-- <Mains2/> -->
    <!-- </div> -->
  </div>
  </div>
</template>

<script>
// import Mains2 from "@/components/HomePage/Mains2"
export default {
  name: "Main",
  data() {
    return {
      step: true
    };
  },
  //监听滚动事件
  mounted(){
    this.Mainonce()
  },
  methods:{
    Mainonce:function(){
       console.log('1')
       window.onscroll = function() {
      }
    }
  },
  components: {
    // Mains2
  },
  props: ["list"],
};
</script>

<style scoped>
.main {
  position: relative;
  padding-top: 1px;
  margin: 0 auto;
  width: 1200px;
  border: 1px solid #ccc;
  margin-top: 7px;
}

.main .main-head {
  height: 300px;
}

.main .main-head .main-left {
  float: left;
  padding: 0 40px 0 0;
  width: 160px;
  height: 300px;
  overflow: hidden;
}

.main .main-head .main-left .b_g {
  position: relative;
  width: 200px;
  height: 300px;
  z-index: -1;
}

.main .main-head .main-left .onTop {
  position: relative;
  left: 20px;
  top: -304px;
}

.main .main-head .main-left h4 {
  margin-bottom: 5px;
  padding-top: 22px;
  height: 39px;
  font-size: 26px;
  color: #fff;
  overflow: hidden;
  text-align: left;
}

.main .main-head .main-left h5 {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 10px;
  height: 24px;
  font-size: 16px;
  color: #fff;
  overflow: hidden;
  text-align: left;
  font-weight: lighter;
  white-space: nowrap;
}

.main .main-head .main-left .chan {
  position: relative;
  left: 0;
  bottom: 24px;
  width: 59px;
  height: 4px;
  background: #fff;
}

.main .main-head .main-left .many {
  margin-bottom: 2px;
  height: 117px;
  overflow: hidden;
}

.main .main-head .main-left .fresh-v {
  float: left;
  margin: 0 9px 9px 0;
  padding: 0 13px;
  max-height: 132px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  border: 1px solid #ddd;
  background: rgba(247, 247, 251, 0.2);
  border-radius: 15px;
  overflow: hidden;
}

.main .main-head .main-left .fresh-v:hover {
  background: rgba(247, 247, 251, 0.4);
}

.main .main-head .main-left .more {
  position: relative;
  display: block;
  padding: 0 22px 0 20px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #00c65d;
  background: #ecf2f9;
  border-radius: 15px;
  overflow: hidden;
  text-align: left;
}

.main .main-head .main-left .more :after {
  content: ">";
  position: relative;
  top: 2px;
  right: -48px;
  line-height: 28px;
  font-size: 20px;
}

.main .main-head .main-center {
  float: left;
  width: 600px;
  height: 300px;
}

.main .main-head .main-center .water,
.main .main-head .main-right .panxie {
  display: block;
  width: 100%;
  height: 100%;
}

.main .main-head .main-right {
  float: left;
  width: 390px;
  height: 300px;
}

.main .main-center {
  height: 280px;
  overflow: hidden;
}

.main .main-center .goodItem {
  float: left;
  padding: 30px 20px 0;
  width: 159px;
  height: 250px;
  border-right: 1px solid #ccc;
}

.main .main-center .goodItem .goodItem_href {
  display: block;
  text-align: center;
}

.main .main-center .goodItem img {
  margin-bottom: 18px;
  transition: all 0.25s ease-in-out;
  width: 150px;
  height: 150px;
}

.main .main-center .goodItem_href p {
  margin-bottom: 4px;
  height: 42px;
  font-size: 14px;
  color: #222;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: lighter;
  transition: color 0.25s ease-in-out;
}

.main .main-center .goodItem .goodItem_href:hover {
  transition: all 0.25s ease-in-out;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.main .main-center .goodItem .goodItem_href:hover > p {
  color: #00c65d;
}

.main .main-center .price {
  display: inline-block;
  font-size: 18px;
  color: #ff541f;
}

.main .main-center .but {
  position: relative;
}

.main .main-center .shopping {
  position: absolute;
  top: -25px;
  right: 0;
  width: 38px;
  height: 22px;
  background: red;
  border-radius: 17%;
  text-align: center;
}

.main .main-center .shopping a {
  color: white;
  font-size: 10px;
}

.main .main-center .notFind {
  position: absolute;
  top: -22px;
  right: 0;
  width: 50px;
  height: 22px;
  background: #ccc;
  font-size: 10px;
  line-height: 22px;
}

.main .main-foot {
  overflow: hidden;
}

.main .main-foot .ic-ons {
  position: relative;
  width: 117px;
  border: 1px solid #f0f0f8;
  float: left;
  height: 80px;
  line-height: 80px;
  text-align: center;
  overflow: hidden;
  border-left: 0;
}

.main .main-foot .ic-ons:nth-of-type(1) {
  border-left: 1px solid #f0f0f8;
}

.main .main-foot .ic-ons:hover {
  transition: all 0.25s ease-in-out;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
}

.main .main-foot img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 100;
  max-width: 100%;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
</style>

